/**
 * Created by felix on 2017/3/5.
 */
import React from 'react';
import { connect } from 'dva';
import _ from 'lodash';
import { Button, Transfer } from 'antd';
import common from '../common.less';
import styles from './index.less';

function mapStateToProps({ game }) {
    return { game };
}

const TransferItem = ({ item }) => {
    let imageUrl = require('../../../assets/img/imgless.png');
    if (item.imgs) {
        imageUrl = _.split(item.imgs, ',')[0];
    }

    return (
        <div className={styles.transferItem}>
            <img src={imageUrl} />
            <h2>{item.title}</h2>
            <p>{item.category}</p>
        </div>
    );
};

export default connect(mapStateToProps)(
    ({ game = {}, dispatch }) => {
        const { data, base = [] } = game;
        const onSubmit = () => {
            dispatch({
                type: 'game/submit',
            });
        };
        const renderItem = (item) => {
            return <TransferItem item={item} />;
        };
        const changeHandle = (targetKeys) => {
            dispatch({
                type: 'game/upState',
                payload: { data: targetKeys },
            });
        };
        const transferData = (data) => {
            return _.map(data, ({ id: key, name: title, description, status, ...other }) => {
                return {
                    key: key.toString(),
                    title,
                    description,
                    disabled: status === 0,
                    ...other,
                };
            });
        };
        return (
            <div className={common.normalWrap}>
                <div className={common.buttonWrap}>
                    <Button type="primary" onClick={onSubmit}>提交游戏列表</Button>
                </div>
                <div className={common.table}>
                    <Transfer
                        titles={['游戏列表', '我的游戏']}
                        operations={['添加', '删除']}
                        targetKeys={data}
                        dataSource={transferData(base)}
                        render={renderItem}
                        notFoundContent="暂无可用数据"
                        listStyle={{
                            width: '320px',
                            height: '640px'
                        }}
                        onChange={changeHandle}
                        lazy={{ height: 64 }}
                    />
                </div>
            </div>
        );
    }
);
